1import {useState, useReducer, useEffect} from 'react';
  2import {useTranslation} from 'react-i18next';
  3import {useRouter} from 'next/router';
  4import Layout from '../../layouts/Default';
  5import Fab from '../../containers/Fab';
  6import CarColumns from '../../containers/CarColumns';
  7import NewCarDialog from '../../containers/NewCarDialog';
  8import AddToMyEventDialog from '../../containers/AddToMyEventDialog';
  9import Loading from '../../containers/Loading';
 10import EventBar from '../../containers/EventBar';
 11import useToastStore from '../../stores/useToastStore';
 12import {
 13  useEventQuery,
 14  useUpdateEventMutation,
 15  Event as EventType,
 16} from '../../generated/graphql';
 17import useEventStore from '../../stores/useEventStore';
 18
 19interface Props {
 20  eventId: string;
 21}
 22
 23const Event = ({eventId}: Props) => {
 24  const {t} = useTranslation();
 25  const addToast = useToastStore(s => s.addToast);
 26  const setEvent = useEventStore(s => s.setEvent);
 27  const eventUpdate = useEventStore(s => s.event);
 28  const setIsEditing = useEventStore(s => s.setIsEditing);
 29  const {data: {event} = {}, loading, error} = useEventQuery({
 30    variables: {id: eventId},
 31  });
 32  const [updateEvent] = useUpdateEventMutation();
 33  const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
 34  const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
 35
 36  useEffect(() => {
 37    if (event) setEvent(event as EventType);
 38  }, [event]);
 39
 40  const onSave = async e => {
 41    try {
 42      const {id, ...data} = eventUpdate;
 43      delete data.__typename;
 44      delete data.cars;
 45      await updateEvent({variables: {id, eventUpdate: data}});
 46      setIsEditing(false);
 47    } catch (error) {
 48      console.error(error);
 49      addToast(t('event.errors.cant_update'));
 50    }
 51  };
 52
 53  const onShare = async () => {
 54    if (!event) return null;
 55    // If navigator as share capability
 56    if (!!navigator.share)
 57      return await navigator.share({
 58        title: `Caroster ${event.name}`,
 59        url: `${window.location.href}`,
 60      });
 61    // Else copy URL in clipboard
 62    else if (!!navigator.clipboard) {
 63      await navigator.clipboard.writeText(window.location.href);
 64      addToast(t('event.actions.copied'));
 65      return true;
 66    }
 67  };
 68
 69  if (loading) return <Loading />;
 70
 71  return (
 72    <Layout
 73      pageTitle={t('event.title')}
 74      menuTitle={t('meta.title', {title: event.name})}
 75      displayMenu={false}
 76    >
 77      <EventBar
 78        event={event}
 79        onAdd={setIsAddToMyEvent}
 80        onSave={onSave}
 81        onShare={onShare}
 82      />
 83      <CarColumns toggleNewCar={toggleNewCar} />
 84      <Fab onClick={toggleNewCar} open={openNewCar} aria-label="add-car" />
 85      <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
 86      <AddToMyEventDialog
 87        event={event}
 88        open={isAddToMyEvent}
 89        onClose={() => setIsAddToMyEvent(false)}
 90      />
 91    </Layout>
 92  );
 93};
 94
 95export default props => {
 96  const router = useRouter();
 97  const {eventId} = router.query;
 98
 99  if (!eventId) return null;
100
101  return <Event {...props} eventId={eventId} />;
102};